<template>
  <div class="InquiryResults">
    <c-title :hide="false" text="车牌查询"></c-title>
    <div class="InquiryResults_content">
      <van-cell-group :border="false">
        <van-cell :border="false" v-if="license_plate.license_no">
          <template #title>
            <div class="custom-title">车牌号</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.license_no }}</div>
          </template>
        </van-cell>
        <van-cell :border="false" v-if="license_plate.car_vin">
          <template #title>
            <div class="custom-title">车架号</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.car_vin }}</div>
          </template>
        </van-cell>
        <van-cell :border="false" v-if="license_plate.brand_model">
          <template #title>
            <div class="custom-title">品牌型号</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.brand_model }}</div>
          </template>
        </van-cell>
        <van-cell :border="false" v-if="license_plate.engine_no">
          <template #title>
            <div class="custom-title">发动机号</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.engine_no }}</div>
          </template>
        </van-cell>
        <van-cell :border="false" v-if="license_plate.init_time">
          <template #title>
            <div class="custom-title">初登日期</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.init_time }}</div>
          </template>
        </van-cell>
        <van-cell :border="false" v-if="license_plate.last_insurance">
          <template #title>
            <div class="custom-title">上年投保公司</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.last_insurance }}</div>
          </template>
        </van-cell>
        <van-cell :border="false" v-if="license_plate.force_insure_end_time">
          <template #title>
            <div class="custom-title">交强险到期时间</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.force_insure_end_time }}</div>
          </template>
        </van-cell>
        <van-cell :border="false" v-if="license_plate.business_insure_end_time">
          <template #title>
            <div class="custom-title">商业险到期时间</div>
          </template>
          <template #default>
            <div class="custom-value">{{ license_plate.business_insure_end_time }}</div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="order_member" v-if="member">
      <div class="member">
        <div class="image">
          <img :src="member.avatar" alt="" />
        </div>
        <div class="member_r">
          <div class="member_r_t">{{ member.nickname }}</div>
          <div class="mobile">{{ member.mobile }}</div>
        </div>
      </div>
      <div class="tagBox">
        <template v-for="(item, ind) in member.tags">
          <div class="tag" :key="ind" v-if="item && item.title">{{ item.title }}</div>
        </template>
      </div>
      <div class="member_detail" v-if="checkLimit && show_limit">
        <div class="line">
          <div class="detail" v-if="show_limit.parent_member == 1">推荐人：{{ member.parent_member.nickname }}</div>
          <div class="detail_r detail" v-if="show_limit.level_name == 1">等级：{{ member.level_name }}</div>
          <div class="detail" v-if="show_limit.createtime == 1">注册时间：{{ member.createtime }}</div>
          <div class="detail_r detail" v-if="show_limit.point == 1">{{credit1}}：{{ member.credit1 }}</div>
          <div class="detail" v-if="show_limit.balance == 1">{{credit}}：{{ member.credit2 }}</div>
          <div class="detail_r detail" v-if="show_limit.love == 1">{{love_name}}：{{ member.love }}</div>
          <div class="detail" v-if="show_limit.gold_coin == 1">{{member.gold_coin_name}}：{{ member.gold_coin }}</div>
          <div class="detail_r detail" v-if="show_limit.refueling_gold == 1">{{ member.refueling_gold_name }}：{{ member.refueling_gold }}</div>
          <div class="detail" v-if="show_limit.copper_gold == 1">{{member.copper_coin_name}}：{{ member.copper_coin }}</div>
        </div>
      </div>
    </div>
    <div class="tabNavBox">
      <van-tabs v-model="active" background="#F5F5F5" line-width="30px" @change="tabChange">
        <van-tab title="优惠券" :name="0" title-style="font-weight: bold;font-size: 0.94rem;"></van-tab>
        <van-tab title="订单" :name="1" title-style="font-weight: bold;font-size: 0.94rem;"></van-tab>
      </van-tabs>
      <template v-if="active == '0' && coupon_list">
        <div class="coupon_list">
          <div class="lis_cloum" v-for="(item, index) in coupon_list" :key="index">
            <div class="lis">
              <!-- <div class="posbg"></div> -->
              <!-- <div class="buttonPos">绑定车牌号</div> -->
              <div class="lis_l">
                <template v-if="item.coupon.discount_rule_str">
                  <div class="lis_l_t">
                    <span class="small" v-if="item.coupon.discount_rule_str.is_price">¥</span>
                    {{ item.coupon.discount_rule_str.discount }}
                    <span class="small" v-if="item.coupon.discount_rule_str.is_rebate">折</span>
                  </div>
                  <div class="lis_l_b">{{ item.coupon.discount_rule_str.desc }}</div>
                </template>
              </div>
              <div class="lis_r" v-if="item.coupon">
                <div class="lis_r_title">{{ item.coupon.coupon_name }}</div>
                <div class="list_r_type">{{ item.coupon.coupon_type_name }}</div>
                <div class="list_r_time">{{ item.validity_period }}</div>
              </div>
            </div>
            <div class="lis_bottom" v-if="item.car">仅限{{ item.car.license_no }}可用</div>
          </div>
        </div>
      </template>

      <template v-if="active == '1' && order_list">
        <div class="orderList" v-for="(item, index) in order_list" :key="index">
          <van-cell-group :border="false">
            <van-cell :border="false" title-style="flex:2;">
              <template #title>
                <div style="text-align: left;">订单号：{{ item.has_one_order.order_sn }}</div>
              </template>
              <template #default>
                <div style="font-weight: 500;font-size: 0.81rem;color: #00001C;" v-if="item.has_one_order">
                  {{ item.has_one_order.status_name }}
                </div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">时间</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.has_one_order.pay_time }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">车牌号</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.plate_num }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">油号</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.oil_name }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">油品名</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.goods_title }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">单价</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.litre_price }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">数量</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.litre }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">合计金额</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.has_one_order.order_goods_price }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">优惠金额</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.has_one_order.discount_price }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">抵扣金额</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.has_one_order.deduction_price }}</div>
              </template>
            </van-cell>
            <van-cell :border="false">
              <template #title>
                <div class="custom-title">支付金额</div>
              </template>
              <template #default>
                <div class="custom-value">{{ item.has_one_order.price }}</div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </template>
    </div>
    <div class="posBtn" @click="toSearch">查询</div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      coupon_list: null,
      license_plate: {},
      member: {},
      order_list: {},
      uid: "",
      show_limit: null,

      isLoadMore: true,
      page: 1,
      total_page: 0,
      love_name:"",
      credit:"",
      credit1:""
    };
  },
  activated() {
    this.page = 1;
    this.total_page = 0;
    this.isLoadMore = true;
    this.getData();
    let basic_info = JSON.parse(localStorage.getItem("yz_basic_info"));
    this.love_name = basic_info.love;
    this.credit1 = basic_info.lang.member_center.credit1;
    this.credit = basic_info.lang.member_center.credit;
  },
  methods: {
    toSearch() {
      this.$router.replace(this.fun.getUrl("numberplateInquiry", {}));
    },
    tabChange() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.coupon_list = [];
      this.order_list = [];
      if (this.active == 1) {
        this.getOrderList(this.member.uid);
      } else {
        this.getCouponList(this.member.uid);
      }
    },
    async getData() {
      let json = {
        plate_num: this.$route.params.card_num
      };
      let { data, msg, result } = await $http.post("plugin.store-oil-station.frontend.license-plate.index", json, "");
      if (result) {
        // this.coupon_list = data.coupon_list?.data || null;
        this.license_plate = data.license_plate;
        this.member = data.member;
        this.getCouponList(data.member.uid);
        this.show_limit = data.show_limit;
      } else {
        this.$toast(msg);
      }
    },
    async getCouponList(id) {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.member-coupon.get-list ", { uid: id }, "");
      if (result) {
        this.coupon_list = data.list.data;
        this.total_page = data.list.last_page;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getOrderList(id) {
      let { data, msg, result } = await $http.post("plugin.store-oil-station.frontend.license-plate.get-oil-order", { uid: id }, "");
      if (result) {
        this.order_list = data.data;
        this.total_page = data.last_page;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          uid: this.member.uid
        };
        let utlStr = "";
        if (this.active == 0) {
          utlStr = "plugin.new-coupon.frontend.controllers.member-coupon.get-list";
        } else {
          utlStr = "plugin.store-oil-station.frontend.license-plate.get-oil-order";
        }
        let { data, msg, result } = await $http.post(utlStr, json, "");
        if (result) {
          this.isLoadMore = true;
          if (this.active == 0) {
            this.coupon_list = this.coupon_list.concat(data.list.data);
          } else if (this.active == 1) {
            this.order_list = this.order_list.concat(data.data);
          }
        } else {
          this.isLoadMore = false;
          this.$toast(msg);
        }
      }
    }
  },
  computed: {
    checkLimit() {
      if (this.show_limit) {
        console.log(this.show_limit);
        for (const key in this.show_limit) {
          console.log(key);
          if (this.show_limit[key] == 1) {
            return true;
          }
        }
        return false;
      }
      return true;
    }
  }
};
</script>
<style lang="scss" scoped>
.posBtn {
  position: fixed;
  right: 0.75rem;
  bottom: 6.88rem;
  width: 2.75rem;
  height: 2.75rem;
  background: RGBA(76, 76, 76, 0.7);
  font-size: 0.81rem;
  color: #ffffff;
  border-radius: 50%;
  line-height: 2.75rem;
  text-align: center;
}
.InquiryResults {
  margin: 0.63rem 0.75rem;
  .tabNavBox {
    .coupon_list {
      box-sizing: border-box;
      overflow: hidden;
      padding-bottom: 3rem;
      .lis_cloum {
        position: relative;
        background: #ffffff;
        border-radius: 0.63rem;
        margin-top: 0.63rem;
        .lis_bottom {
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          background: #ffffff;
          padding: 0 0.63rem;
          text-align: left;
          border-radius: 0 0 0.63rem 0.63rem;
          font-size: 0.75rem;
          color: #aaaab3;
        }
        .lis {
          position: relative;
          padding: 0.53rem 0;
          box-sizing: border-box;
          background: #ffffff;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          box-shadow: 0rem 0.19rem 0.47rem 0.03rem #f0f0f1;
          border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
          .buttonPos {
            position: absolute;
            z-index: 1;
            top: 1.8rem;
            left: 8rem;
            width: 5.88rem;
            height: 2rem;
            background: #f15353;
            border-radius: 1rem 1rem 1rem 1rem;
            text-align: center;
            line-height: 2rem;
            font-weight: 500;
            font-size: 0.88rem;
            color: #ffffff;
          }
          .lis_l {
            width: 6.88rem;
            border-right: 1px dashed #d6d6dc;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .lis_l_t {
              font-size: 1.5rem;
              font-weight: bold;
              color: #ec2b2b;
              .small {
                font-size: 0.7rem;
              }
            }
            .lis_l_b {
              font-size: 0.75rem;
              color: #ec2b2b;
            }
          }
          .lis_r {
            flex: 1;
            padding: 0 0.72rem;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            .lis_r_title {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: left;
            }
            .list_r_type {
              flex-shrink: 0;
              padding: 0 0.22rem;
              height: 1.13rem;
              line-height: 1.13rem;
              border-radius: 0.31rem;
              background: #fef1f1;
              font-size: 0.75rem;
              color: #ec2b2b;
              margin-top: 0.28rem;
            }
            .list_r_time {
              font-size: 0.75rem;
              color: #6e6e79;
              text-align: left;
              margin-top: 0.28rem;
            }
          }
        }
        .lis::after {
          content: "";
          position: absolute;
          width: 0.5rem;
          height: 0.5rem;
          left: 6.6rem;
          top: -0.2rem;
          background: #000;
          border-radius: 50%;
          // border: 0.03rem solid var(--wlborder);
          background: #f0f0f1;
        }
        .lis::before {
          content: "";
          position: absolute;
          width: 0.5rem;
          height: 0.5rem;
          left: 6.6rem;
          bottom: -0.2rem;
          background: #000;
          border-radius: 50%;
          // border: 0.03rem solid var(--wlborder);
          background: #f0f0f1;
        }
        .posbg {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.5;
        }
      }
      .lis_cloum:first-child {
        margin-top: 0.94rem;
      }
    }
    .orderList {
      padding: 1rem 0 0 0;
      box-sizing: border-box;
      .van-cell {
        padding: 10px 0.63rem;
        border-radius: 0.5rem;
      }
      .custom-title {
        font-size: 0.81rem;
        color: #6e6e79;
        text-align: left;
      }
      .custom-value {
        font-weight: 500;
        font-size: 0.81rem;
        color: #00001c;
      }
    }
  }
  .order_member {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: #fff;
    margin-top: 0.63rem;
    .member_detail {
      padding: 0.9rem 0.63rem;
      padding-bottom: 0;
      background: #f5f5f5;
      border-radius: 0.63rem;
      box-sizing: border-box;
      margin-top: 0.56rem;
      .line {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 0.94rem;
        .detail {
          // flex: 1;
          flex-shrink: 0;
          width: 50%;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 0.9rem;
        }
        .detail_r {
          text-align: left;
          // width: 35%;
          // flex-shrink: 0;
          // text-align: left;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
      }
      .line:last-child {
        margin-bottom: 0;
      }
    }
    .tagBox {
      display: flex;
      margin-top: 0.59rem;
      flex-wrap: wrap;
      .tag {
        font-size: 0.69rem;
        color: #3b3b4a;
        padding: 0.22rem 0.34rem;
        border-radius: 0.25rem;
        border: 0.03rem solid #d6d6dc;
        margin-left: 0.38rem;
        margin-bottom: 0.38rem;
      }
      .tag:first-child {
        margin-left: 0;
      }
    }
    .member {
      display: flex;
      .member_r {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: left;
        .member_r_t {
          font-weight: bold;
          font-size: 0.88rem;
        }
        .mobile {
          font-size: 0.75rem;
          color: #8e8e95;
          margin-top: 0.15rem;
        }
      }
      .image {
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background: #aaaab3;
        margin-right: 0.28rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
  .InquiryResults_content {
    background: #fff;
    border-radius: 1rem !important;
    .van-cell {
      border-radius: 1rem !important;
    }
    .custom-title {
      width: 100%;
      text-align: left;
      font-size: 0.81rem;
      color: #6e6e79;
    }
    .custom-value {
      font-weight: 500;
      font-size: 0.81rem;
      color: #00001c;
    }
  }
}
</style>
